<template>
  <div id="news-list">
    <load-more
      :top-method="loadTop"
      :topDistance="68"
      @top-status-change="handleTopChange"
      ref="LM">
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus === 'pull'" class="text">下拉即可刷新...</span>
        <span v-show="topStatus === 'drop'" class="text">释放即可刷新...</span>
        <span v-show="topStatus === 'loading'">
            <spinner
              type="fading-circle"
              color="#26a2ff"
              :size="36"></spinner>
          </span>
      </div>
      <ul>
        <router-link
          v-for="(item, index) in contents"
          :key="index"
          :to="'/news/news-detail/' + item.id"
          tag="li">
          <a>
            <div class="left">
              <h4 v-text="item.title"></h4>
              <h6>
                <span v-text="item.name"></span>
              </h6>
            </div>
            <div class="right">
              <img :src="item.img" alt="">
            </div>
          </a>
        </router-link>
      </ul>
    </load-more>
  </div>
</template>

<script>
  import { Loadmore, Spinner } from 'mint-ui';
  export default {
    name: "news-list",
    components: {
      LoadMore: Loadmore,
      Spinner
    },
    data() {
      return {
        /**
         * 根据接口数据格式：item => {
         *    img: xxx, // 图片
         *    name: xxx, // 资讯类别
         *    title: xxx // 标题
         *    id: xxx // id
         * }
         */

        contents: [],

//        标记最新的一条 ‘最新资讯’
        latestContent: '',

//        LoadMore初始化

        topStatus: 'pull'
      }
    },
    methods: {

//      查询最新资讯内容列表（content） 赋值 // 默认查询前20条

      loadNewsList() {
        this.$http.post({
          api: this.$api.NEWS_LIST,
          params: {
            pageNum: 1,
            pageSize: 20,
            cid: this.$route.params.type || 0
          },
          success: function (res) {
//            判断：是否 不存在(后台返回空数组) 或者 已经是最新一条

            if (!res.data.data.length || this.latestContent === res.data.data[0].id) {
              return;
            }

//            更新数据

            this.contents = res.data.data;
            this.latestContent = res.data.data[0].id;
          }.bind(this)
        });
      },

//      监听下拉状态

      handleTopChange(status) {
        this.topStatus = status;
      },

//      下拉刷新

      loadTop() {

//        加载更多数据

        setTimeout(() => {

          this.loadNewsList();

          this.$refs.LM.onTopLoaded();
        }, 1200);
      }
    },
    created() {
      this.loadNewsList();
    },
    watch: {
      '$route': 'loadNewsList'
    }
  }
</script>

<style scoped lang="scss">

  #news-list {
    .mint-loadmore-top {
      display: flex;
      justify-content: space-around;

      >.text {
        font-size: 1.4rem;
        color: #888;
      }
    }

    li {
      border-top: 1px solid #eee;

      >a {
        display: flex;
        width: $size-as-parent;
        height: 8.3rem;

        >.left {
          padding: .8rem 1.6rem .8rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;

          >h4 {
            font-size: 1.4rem;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          >h6 {
            text-align: right;

            >span {
              display: inline-block;
              width: 70px;
              height: 20px;
              line-height: 20px;
              font-size: 1.2rem;
              text-align: center;
              color: #999;
              border-radius: 6px;
              background: $grey;
            }
          }
        }

        >.right {
          display: flex;
          align-items: center;

          >img {
            width: 100px;
            height: 72px;
          }
        }
      }
    }
  }
</style>
